<template>
  <div >
    <!-- 对话框 -->
    <el-dialog title="派单" :visible.sync="open" width="50%" append-to-body>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
         <el-steps :active="active" finish-status="wait" process-status="finish"  align-center>
            <el-step title="第一步" description="选择接单者">          
            </el-step>
            <el-step title="第二步" description="选择预约时间"> 
            </el-step>
            <el-step title="第三步" description="提交"> 
            </el-step>
          </el-steps>
        </div>
        <div>
          <div v-show="active == 0">
              <el-row :gutter="20">      
                <!--用户数据-->
                <el-col :span="24" :xs="24">
                  <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                    <el-form-item label="用户名称" prop="nickName">
                      <el-input
                        v-model="queryParams.nickName"
                        placeholder="请输入用户名称"
                        clearable
                        size="small"
                        style="width: 140px"
                        @keyup.enter.native="handleQuery"
                      />
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phonenumber">
                      <el-input
                        v-model="queryParams.phonenumber"
                        placeholder="请输入手机号码"
                        clearable
                        size="small"
                        style="width: 140px"
                        @keyup.enter.native="handleQuery"
                      />
                    </el-form-item>
                    
                    
                    <el-form-item>
                      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                  </el-form>

                  <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center" />
                    
                    <el-table-column label="账号" align="center" prop="userName" :show-overflow-tooltip="true" />
                    <el-table-column label="用户名" align="center" prop="realName"  :show-overflow-tooltip="true" />
                    <el-table-column label="手机号码" align="center" prop="phonenumber"  />
                    <!-- <el-table-column label="区域" align="center" prop="area"  /> -->
                    <el-table-column label="个人技能" align="center"  prop="tags"  :show-overflow-tooltip="true" >
                      <template slot-scope="scope">
                        <span>{{ scope.row.tags.split(";").map(a=>a.split("=")[1]).filter(a=>a).join() }}</span>
                      </template>
                    </el-table-column>            
                    <el-table-column label="所属公司" align="center" prop="company.name" :show-overflow-tooltip="true" />
                    <el-table-column label="所属代理" align="center" prop="proxy.name"  :show-overflow-tooltip="true" />
                  </el-table>

                  <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                  />
                </el-col>
              </el-row>
          </div>     

          <el-form v-show="active == 1" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="订单编号" prop="num">
                  <el-input v-model="form.num" placeholder="请选择服务" disabled >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单分类" prop="categoryName">
                  <el-input v-model="form.categoryName" placeholder="请选择服务" disabled >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="订单信息" prop="attribute">
                  <el-input  v-model="form.attribute" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格属性" prop="tags">
                  <el-input v-model="form.tags" disabled />
                </el-form-item>          
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="联系人" prop="username">
                  <el-input v-model="form.username" placeholder="请输入联系人姓名" disabled/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="telephone">
                  <el-input v-model="form.telephone" placeholder="请输入联系人电话" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">           
              <el-col :span="12">
                <el-form-item label="预约时间" prop="orderTime">
                  <el-date-picker clearable size="small"
                    v-model="form.orderTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择预约时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            
          </el-form>
        </div>
      </el-card>      
      <div slot="footer"  class="dialog-footer" style="text-align:center;" >
        <el-button type="primary" @click="nextStep" v-if="active == 0">下一步</el-button>
        <el-button type="primary" @click="active--" v-if="active == 1">上一步</el-button>
        <el-button type="primary" @click="submitForm" v-if="active == 1">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listUser, getUser, delUser, addUser, updateUser, exportUser, resetUserPwd, changeUserStatus, importTemplate } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder, distributeOrder } from "@/api/business/order";

export default {
  name: "User",
  components: {  },
  data() {
    return {
      active: 0,
      selection: [],
      orderTime: null,
      // 遮罩层
      loading: true,
      orderloading: true,
      // 导出遮罩层
      exportLoading: false,
      orderShow: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      orderTotal: 0,
      // 用户表格数据
      userList: null,
      orderList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      companyOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      statusOptions: [],
      // 性别状态字典
      sexOptions: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "name"
      },
      
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        companyId: undefined
      },
      // 查询参数
      queryOrderParams: {
        pageNum: 1,
        pageSize: 10,
        num: null,
        detail: null,
        orderTime: null,
        userId: null,
        username: null,
        telephone: null,
        receiveId: null,
        receiveName: null,
        receivePhone: null,
        receiveLimit: null,
        group: null,
        attribute: null,
        status: null,
        createName: null,
        createId: null,
        createTime: null,
        payable: null,
        pay: null,
        payMethod: null
      },
      // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true }
      ],
      
    };
  }, 
  created() {
    this.getList();
    
  },
  methods: {
    init(data){
      this.open = true;
      this.form = data;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      this.queryParams.authStatus = 2;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    nextStep() {
      if (this.selection.length == 0) {
        this.msgError("请选择一条记录");
        return;
      }
      this.active++;
    },
   
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection; 
      this.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },  
   /** 提交按钮 */
    submitForm() {
      if (this.single ) {
        this.msgError("请选择一条记录");
        return;
      }
      this.form.receiveId = this.selection[0].userId;
      this.form.receiveName = this.selection[0].realName;
      this.form.receivePhone = this.selection[0].phonenumber;
      this.form.status = 10; 
      distributeOrder(this.form).then(response => {
        this.msgSuccess("派单成功");
        this.open = false;
        this.$emit("finishSelected");      
      });
      
    },
    
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
   
   
  }
};
</script>